<template>
  <v-layout>
    <v-navigation-drawer
      v-model="boardStore.rightBarShow"
      width="400"
      temporary
      location="right"
    >
      <v-list lines="one" @click:select="switchFile">
        <v-list-subheader>文件列表</v-list-subheader>

        <v-list-item
          v-for="item in files"
          :key="item.title"
          :value="item.fid"
          color="primary"
        >
          <template v-slot:prepend>
            <v-icon :icon="item.icon"></v-icon>
          </template>

          <v-list-item-title v-text="item.title"></v-list-item-title>

          <template v-slot:append>
            <v-btn icon="$vuetify" variant="text" @click="deleteFile(item.fid)">
              <v-icon color="red lighten-1">mdi-delete-outline</v-icon>
            </v-btn>
          </template>
        </v-list-item>

        <!--          <v-list-group
            v-model="currentFileIdx"
            mandatory
            color="primary"
            @change="switchFile"
          >
            <v-list-item v-for="item in files" :key="item.title">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title
                  v-text="item.title"
                  :value="item.fid"
                ></v-list-item-title>
              </v-list-item-content>
              <v-list-item-action>
                <v-btn icon @click="deleteFile(item.fid)">
                  <v-icon color="red lighten-1">mdi-delete-outline</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list-group>-->
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

<script>
import { useBoardStore } from "@/store/modules/drawBoard";

export default {
  name: "Rightbar",
  data() {
    return {
      boardStore: {},
      window,
      drawer: false,
      files: [],
      fileList: [],
      currentFile: null,
      currentFileFid: "",
    };
  },
  computed: {
    rightBarShow() {
      return this.boardStore.rightBarShow;
    },
  },
  watch: {
    rightBarShow(value) {
      if (value) {
        this.fileList = window.teduBoard.getFileInfoList();
        console.log(this.fileList, "fileList");
        this.currentFile = window.teduBoard.getCurrentFile();
        this.files = this.fileList.map((f) => ({
          fid: f.fid,
          title: f.title,
          icon: "mdi-file-outline",
        }));
        // this.currentFileIdx = this.files.findIndex(
        //   (value) => value.fid === this.currentFile
        // );
      }
    },
  },
  created() {
    this.boardStore = useBoardStore();
  },
  methods: {
    setRightBarShow(val) {
      useBoardStore().setRightBarShow(val);
    },
    switchFile(e) {
      window.teduBoard.switchFile(e.id);
      this.setRightBarShow(false);
    },
    deleteFile(fid) {
      window.teduBoard.deleteFile(fid);
      this.setRightBarShow(false);
    },
  },
};
</script>
